<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>订单详情</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <style>
    body { font-family: Arial, sans-serif; background: #f4f4f4; padding: 20px; }
    .container { max-width: 600px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    h1 { text-align: center; margin-bottom: 20px; }
    .order-details { font-size: 16px; line-height: 1.6; }
    .error { color: red; }
  </style>
</head>
<body>
  <div class="container">
    <h1>订单详情</h1>
    <div id="content">
      <!-- 订单内容将显示在这里 -->
    </div>
  </div>
  <!-- 引入 Firebase SDK -->
  <script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.2/firebase-app.js";
    import { getFirestore, doc, getDoc } from "https://www.gstatic.com/firebasejs/9.22.2/firebase-firestore.js";

    // 替换为你的 Firebase 配置
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "your-project.firebaseapp.com",
      projectId: "your-project",
      storageBucket: "your-project.appspot.com",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    };

    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);

    // 从 URL 参数获取 orderId 和 token
    const params = new URLSearchParams(window.location.search);
    const orderId = params.get('orderId');
    const token = params.get('token');

    const contentDiv = document.getElementById('content');

    async function loadOrder() {
      if (!orderId || !token) {
        contentDiv.innerHTML = `<p class="error">缺少订单信息</p>`;
        return;
      }
      try {
        const orderRef = doc(db, "orders", orderId);
        const orderSnap = await getDoc(orderRef);
        if (orderSnap.exists()) {
          const orderData = orderSnap.data();
          if (orderData.orderToken !== token) {
            contentDiv.innerHTML = `<p class="error">无权访问此订单</p>`;
            return;
          }
          // 显示订单信息
          contentDiv.innerHTML = `
            <div class="order-details">
              <p>订单号：${orderId}</p>
              <p>订单状态：${orderData.status || "未知"}</p>
              <p>租车金额：${orderData.amount ? "฿" + orderData.amount : "未知"}</p>
              <p>取车日期：${orderData.rentalStart || "未知"}</p>
              <p>还车日期：${orderData.rentalEnd || "未知"}</p>
              <p>车辆信息：${orderData.carTitle || "未知"}</p>
              <!-- 可继续展示其他字段 -->
            </div>
          `;
        } else {
          contentDiv.innerHTML = `<p class="error">订单不存在</p>`;
        }
      } catch (error) {
        console.error("加载订单失败：", error);
        contentDiv.innerHTML = `<p class="error">加载订单时出错</p>`;
      }
    }
    loadOrder();
  </script>
</body>
</html>